<template>
<div>
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
        <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

      </el-breadcrumb>
      <el-button @click="insertPaymenttype" style="text-align: left;">新增</el-button>
      <el-dropdown>
        <span style="cursor: pointer">{{$store.state.empName}}<i class="el-icon-arrow-down "  style=" cursor: pointer" ></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-main>
        <el-table :data="page.records" border>
          <el-table-column prop="pmTypeId" label="缴费项目信息编号" ></el-table-column>
          <el-table-column prop="pmTypeName" label="缴费项目名称"></el-table-column>
          <el-table-column prop="remakes" label="备注" ></el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <a href="#" @click="updatePaymenttype(scope.row)">修改</a>
              <a href="#" @click="deletePaymenttype(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页控件-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[5, 8, 10, 12]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </el-main>
<!--      添加或修改缴费项目信息-->
      <el-dialog
        title="操作缴费项目信息"
        :visible.sync="insertPaymenttypeDialogVisible"
        width="50%"
        :before-close="handleClose">
        <div id="studentChangeForm">
          <span v-if="pay.pmTypeId!=null">缴费项目信息编号</span>
          <el-input v-model="pay.pmTypeId" placeholder="缴费项目信息编号" v-if="pay.pmTypeId!=null" style="width: 220px"></el-input><br>
          <span>缴费项目名称</span>
          <el-input v-model="pay.pmTypeName" placeholder="缴费项目名称" style="width: 220px"></el-input><br>
          <span>备注</span>
          <el-input v-model="pay.remakes" placeholder="备注" style="width: 220px"></el-input><br>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="paymenttypeDialogCancel">取 消</el-button>
        <el-button type="primary" @click="paymenttypeDialogCommit">确 定</el-button>
      </span>
      </el-dialog>
    </el-header>
  </el-container>
</div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "PaymentType",
  data(){
    return{
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      pay:{},
      insertPaymenttypeDialogVisible:false,//添加或修改住宿
    }
  },
  methods:{
    selectAll(){
      instance.get("/payType/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page=res.data;
      });
    },
    updatePaymenttype(row) {//修改住宿信息
      this.pay.pmTypeId = row.pmTypeId;
      instance.get("/payType/"+row.pmTypeId).then(res=>{
        this.pay = res.data;
      });
      this.insertPaymenttypeDialogVisible = true;
    },
    deletePaymenttype(row){//删除住宿信息
      instance.delete("/payType/"+row.pmTypeId).then(res=>{
        if (res.data>0){
          this.$message("删除成功");
          this.selectAll();//重新加载信息
          this.$router.push({name:'PaymentType'});
        }else {
          this.$message("删除失败");
        }
      });
      this.selectAll();
    },
    insertPaymenttype(){
      this.pay={};
      this.insertPaymenttypeDialogVisible=true;
    },
    paymenttypeDialogCommit(){//添加/修改缴费类型信息 对话框提交
      //提交到后台
      instance.post("/payType",this.pay).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.pay = {};//清空表单
          this.insertPaymenttypeDialogVisible = false;//关闭对话框
          this.selectAll();//重新加载信息
        }else {
          this.$message("操作失败!");
        }
      });
      this.selectAll();//重新加载信息

    },
    paymenttypeDialogCancel(){
      this.$message("已取消!");
      this.pay = {};//清空表单
      this.insertAccomodationDialogVisible = false;//隐藏弹出窗
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/payType/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
        this.selectAll();//重新加载信息
        this.$router.push({name:'PaymentType'});
      });
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/payType/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
        this.selectAll();//重新加载信息
        this.$router.push({name:'PaymentType'});
      });
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },
  created() {
    this.selectAll();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
